import React from 'react'
import { Box, AutoRollComponent, NoData } from '$components';
import { Tooltip } from 'antd';

function Infrastructure(props) {
    const { waterLevelAlarms } = props;

    const renderList = () => <div className='_city_safty'>
        {
            // alarm_unhandle FF2C2C  alarm_handle FFEA00
            waterLevelAlarms.map(a => <div className={a.alarms[0]?.state >= 3 ? 'alarm_handle' : 'alarm_unhandle'}>
                <div className='handle_img' />
                <div className='alarm_content'>
                    <div className='alarm_bg'>
                        <Tooltip title={a.alarms[0]?.source?.name}>
                            <div className='alarm_title1'>{a.alarms[0]?.source?.name}</div>
                        </Tooltip>
                        <div className='alarm_title2' style={{ color: a.alarms[0]?.state >= 3 ? '#FFEA00' : '#FF2C2C' }}>{convertLevelToLabel(a.alarms[0]?.level)}</div>
                    </div>
                    <div className='alarm_text'>{a.alarms[0]?.content}</div>
                </div>
            </div>)
        }
    </div>

    return <Box title={"预警统计"} >
        {waterLevelAlarms?.length > 0 ? <AutoRollComponent canScroll={true} content={renderList()} divHeight={400} divId={`water-left-bottom-alarm`} /> : <NoData height={320}/>}
    </Box>
}

export default Infrastructure;

function convertLevelToLabel(level) {
    switch (level) {
        case 1:
            return '一级预警';
        case 2:
            return '二级预警';
        case 3:
            return '三级预警';
        default:
            return '';
    }
}
